<template>
    <div class="sel-box" style="width: 100%;justify-content: space-around;">
        



        <div class="sel-cont" v-if="user.qx.qx6 == 1">
            <el-row :gutter="20">
                <el-col :span="7" :offset="0">产品:</el-col>
                <el-col :span="17" :offset="0">
                    <div class="com-sel">
                        <el-tree-select v-model="value3" :data="category" check-strictly :render-after-expand="false"
                            @node-click="handleCate" :props="defaultProps" placeholder="请选择产品类别" node-key="id"
                            ref="treeRef3">
                        </el-tree-select>
                        <el-icon class="my-icon" @click="handleClear3" v-if="value3">
                            <CircleClose />
                        </el-icon>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="sel-cont" v-if="user.qx.qx3 == 1">
            <el-row :gutter="20">
                <el-col :span="7" :offset="0">品牌:</el-col>
                <el-col :span="17" :offset="0">
                    <div class="com-sel">
                        <el-tree-select v-model="value1" :data="brand" check-strictly :render-after-expand="false"
                            @node-click="handleBrand" :props="defaultProps" placeholder="请选择品牌厂家" node-key="id"
                            ref="treeRef1">
                        </el-tree-select>
                        <el-icon class="my-icon" @click="handleClear5" v-if="value1">
                            <CircleClose />
                        </el-icon>
                    </div>
                </el-col>
            </el-row>
        </div>

        
        <div class="sel-cont" v-if="user.qx.qx2 == 1">
            <el-row :gutter="20">
                <el-col :span="7" :offset="0">规格:</el-col>
                <el-col :span="17" :offset="0">
                    <div class="com-sel">
                        <el-tree-select v-model="value" :data="spec" check-strictly :render-after-expand="false"
                            @node-click="handleSpec" :props="defaultProps" placeholder="请选择规格尺寸" ref="treeRef"
                            node-key="id">
                        </el-tree-select>
                        <el-icon class="my-icon" @click="handleClear" v-if="value">
                            <CircleClose />
                        </el-icon>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="sel-cont" v-if="user.qx.qx4 == 1">
            <el-row :gutter="20">
                <el-col :span="7" :offset="0">厚度:</el-col>
                <el-col :span="17" :offset="0">
                    <div class="com-sel">
                        <el-tree-select v-model="value4" :data="thickness" check-strictly :render-after-expand="false"
                            @node-click="handlethickness" :props="defaultProps" placeholder="请选择厚度" node-key="id"
                            ref="treeRef4">
                        </el-tree-select>
                        <el-icon class="my-icon" @click="handleClear4" v-if="value4">
                            <CircleClose />
                        </el-icon>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="sel-cont" v-if="user.qx.qx5 == 1">
            <el-row :gutter="20">
                <el-col :span="7" :offset="0">工艺:</el-col>
                <el-col :span="17" :offset="0">
                    <div class="com-sel">
                        <el-tree-select v-model="value2" :data="technology" check-strictly :render-after-expand="false"
                            @node-click="handlete" :props="defaultProps" placeholder="请选择工艺种类" node-key="id"
                            ref="treeRef2">
                        </el-tree-select>
                        <el-icon class="my-icon" @click="handleClear2" v-if="value2">
                            <CircleClose />
                        </el-icon>
                    </div>
                </el-col>
            </el-row>
        </div>
        
        <!-- 颜色 -->
        <div class="sel-cont" v-if="user.qx.qx29 == 1">
            <el-row :gutter="20">
                <el-col :span="7" :offset="0">颜色:</el-col>
                <el-col :span="17" :offset="0">
                    <div class="com-sel">
                        <el-tree-select v-model="value7" :data="colorList" check-strictly :render-after-expand="false"
                            @node-click="handleCatef2" :props="defaultProps" placeholder="请选择产品颜色" node-key="id"
                            ref="treeRef7">
                        </el-tree-select>
                        <el-icon class="my-icon" @click="handleClear7" v-if="value7">
                            <CircleClose />
                        </el-icon>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="sel-cont" v-if="user.qx.qx32 == 1">
            <el-row :gutter="20">
                <el-col :span="7" :offset="0">色类:</el-col>
                <el-col :span="17" :offset="0">
                    <div class="com-sel">
                        <el-tree-select v-model="value10" :data="selist" check-strictly :render-after-expand="false"
                            @node-click="handleCatef5" :props="defaultProps" placeholder="请选择" node-key="id"
                            ref="treeRef10">
                        </el-tree-select>
                        <el-icon class="my-icon" @click="handleClear10" v-if="value10">
                            <CircleClose />
                        </el-icon>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="sel-cont" v-if="user.qx.qx31 == 1">
            <el-row :gutter="20">
                <el-col :span="7" :offset="0">品类:</el-col>
                <el-col :span="17" :offset="0">
                    <div class="com-sel">
                        <el-tree-select v-model="value9" :data="pingList" check-strictly :render-after-expand="false"
                            @node-click="handleCatef4" :props="defaultProps" placeholder="请选择" node-key="id"
                            ref="treeRef9">
                        </el-tree-select>
                        <el-icon class="my-icon" @click="handleClear9" v-if="value9">
                            <CircleClose />
                        </el-icon>
                    </div>
                </el-col>
            </el-row>
        </div>


       

        <div class="sel-cont" v-if="user.qx.qx28 == 1">
            <el-row :gutter="20" >
                <el-col :span="7" :offset="0">配套汇总:</el-col>
                <el-col :span="17" :offset="0">
                    <div class="com-sel">
                        <el-tree-select v-model="value6" :data="pei" check-strictly :render-after-expand="false"
                            @node-click="handleCatef1" :props="defaultProps" placeholder="请选择配套汇总" node-key="id"
                            ref="treeRef6">
                        </el-tree-select>
                        <el-icon class="my-icon" @click="handleClear6" v-if="value6">
                            <CircleClose />
                        </el-icon>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="sel-cont" v-if="user.qx.qx1 == 1">
            <el-row :gutter="20">
                <el-col :span="7" :offset="0">关键词:</el-col>
                <el-col :span="17" :offset="0">
                    <div class="com-sel">
                        <el-tree-select v-model="value5" :data="sx" check-strictly :render-after-expand="false"
                            @node-click="handleSpec1" :props="defaultProps" placeholder="请打开关键词" ref="treeRef"
                            node-key="id">
                        </el-tree-select>
                        <el-icon class="my-icon" @click="handleCleara" v-if="value5">
                            <CircleClose />
                        </el-icon>
                    </div>
                </el-col>
            </el-row>
        </div>


        <div class="sel-cont" v-if="user.qx.qx30 == 1">
            <el-row :gutter="20">
                <el-col :span="7" :offset="0">适用:</el-col>
                <el-col :span="17" :offset="0">
                    <div class="com-sel">
                        <el-tree-select v-model="value8" :data="syList" check-strictly :render-after-expand="false"
                            @node-click="handleCatef3" :props="defaultProps" placeholder="请选择" node-key="id"
                            ref="treeRef8">
                        </el-tree-select>
                        <el-icon class="my-icon" @click="handleClear8" v-if="value8">
                            <CircleClose />
                        </el-icon>
                    </div>
                </el-col>
            </el-row>
        </div>
        
       

       



    </div>
</template>

<script setup>
import { computed, ref, watch, onMounted, onUpdated, defineProps } from 'vue';
import { useGoods } from '../../store/goods'
import { useUser } from '../../store/user';
import { ElMessage } from 'element-plus';
import { GoodsBrand, GoodsSpec, GoodsTechnology, GoodsCategory, getthickness, goodstype, getAuth,GoodsPei ,GoodsSy,GoodsColor,GoodsPin,GoodsSe } from '../../api/goods'

const user = useUser()
// let { token } = user.userinfo
let  token = user?.userinfo?.token || ''
const props = defineProps(['text', 'searid'])
const goods = useGoods()








// 获取品牌厂家
let { brand_id } = goods
const checked = ref([])
const defaultProps = {
    children: 'child',
    label: 'name',
    value: 'id',
}

checked.value = brand_id
watch(checked, (n) => {
    console.log(n);
    goods.brand_id = n
    checked.value = n
})

const value = ref()
const value1 = ref()
const value2 = ref()
const value3 = ref()
const value4 = ref()
const value5 = ref()

let value6 = ref()
let value7 = ref()
let value8 = ref()
let value9 = ref()
let value10 = ref()
let value11 = ref()
let value12 = ref()
let value13 = ref()
let value14 = ref()
let value15 = ref()
let value16 = ref()
let value17 = ref()
let value18 = ref()
let value19 = ref()
let value20 = ref()
let value21 = ref()

let sx = ref([])

goodstype(token).then(res => {
    console.log(res.data.data);
    sx.value = res.data.data
})

// 厂家信息
const brand = ref([])
GoodsBrand(token).then(res => {
    brand.value = res.data.data
})

// 规格尺寸
const spec = ref([])
let res = await GoodsSpec(token)
spec.value = res.data.data.map(item => {
    delete item.child
    return item
})
// console.log(spec.value);
// 工艺种类
const technology = ref([])
let res1 = await GoodsTechnology(token)
technology.value = res1.data.data

// 分类
const category = ref([])
let res2 = await GoodsCategory(token)
category.value = res2.data.data

const thickness = ref([])
let res3 = await getthickness(token)
thickness.value = res3.data.data

// 规格尺寸
const handleSpec = (nodeData) => {
    goods.page = 1
    if (user.userinfo) {
        let { child, id } = nodeData
        let arr = []
        arr.push(id)
    
        goods.spec = arr
    } else {
        ElMessage.error('请登录账号')
    }
}


// 配套

console.log("token",token);

let pei = ref([])
GoodsPei(token).then(res=>{
    console.log(res.data.data);
    pei.value = res.data.data
})


// 颜色 
let colorList = ref([])
GoodsColor(token).then(res=>{
    console.log(res.data.data,"==yakljsh1");
    colorList.value = res.data.data
})

// 适用
let syList = ref([])
GoodsSy(token).then(res=>{
    syList.value = res.data.data
})

// 品类
let pingList = ref([])
GoodsPin(token).then(res=>{
    pingList.value = res.data.data
})

// 色类

let selist = ref([])
GoodsSe(token).then(res=>{
    selist.value = res.data.data
})


const handleSpec1 = (nodeData) => {
    goods.page = 1
    console.log("======5");
    if (user.userinfo) {
        let { child, id } = nodeData
        let arr = []
        arr.push(id)
        goods.type = arr
    } else {
        ElMessage.error('请登录账号')
    }
}
// 工艺
const handlete = (nodeData) => {
    goods.page = 1
    if (user.userinfo) {
        let { child, id } = nodeData
        let arr = []
        arr.push(id)
        // if (child.length > 0) {
        //     child.forEach(obj => {
        //         arr.push(obj.id)
        //     });
        // }
        goods.technology = arr
    } else {
        ElMessage.error('请登录账号')
    }
}
// 种类
const handleCate = (nodeData) => {
    goods.page = 1
    if (user.userinfo) {
        let { child, id } = nodeData
        let arr = []
        arr.push(id)
        // if (child.length > 0) {
        //     child.forEach(obj => {
        //         arr.push(obj.id)
        //     });
        // }
        goods.category = arr
    } else {
        ElMessage.error('请登录账号')
    }
}


// 配套
const handleCatef1 = (nodeData) => {

    console.log(nodeData);
    goods.page = 1
    if (user.userinfo) {
        let { child, id } = nodeData
        let arr = []
        arr.push(id)
        
        goods.typea = arr

        console.log(goods);
    } else {
        ElMessage.error('请登录账号')
    }
}

// 颜色
const handleCatef2 = (nodeData) => {
    goods.page = 1
    if (user.userinfo) {
        let { child, id } = nodeData
        let arr = []
        arr.push(id)
      
        goods.typeb = arr
        // goods.category = arr
    } else {
        ElMessage.error('请登录账号')
    }
}

// 适用
const handleCatef3 = (nodeData) => {
    goods.page = 1
    if (user.userinfo) {
        let { child, id } = nodeData
        let arr = []
        arr.push(id)
       

        goods.typec = arr
        // goods.category = arr
    } else {
        ElMessage.error('请登录账号')
    }
}

// 品类
const handleCatef4 = (nodeData) => {
    goods.page = 1
    if (user.userinfo) {
        let { child, id } = nodeData
        let arr = []
        arr.push(id)
       
        // goods.category = arr
        goods.typed = arr
    } else {
        ElMessage.error('请登录账号')
    }
}

const handleCatef5 = (nodeData) => {
    goods.page = 1
    if (user.userinfo) {
        let { child, id } = nodeData
        let arr = []
        arr.push(id)
       

        goods.typee = arr
        // goods.category = arr
    } else {
        ElMessage.error('请登录账号')
    }
}



watch(() => props.searid, (newval, oldval) => {
    console.log(newval, "监听");
    if (newval) {
        goods.page = 1
        let arr = []
        value1.value = newval
        arr.push(newval)
        goods.brand_id = arr
    }

}, { deep: true })

const handleBrand = (nodeData) => {
    goods.page = 1
    if (user.userinfo) {
        let { id } = nodeData
        let arr = []
        arr.push(id)
        goods.brand_id = arr
    } else {
        ElMessage.error('请登录账号')
    }
}
const handlethickness = (nodeData) => {
    goods.page = 1
    console.log(nodeData, "品牌");
    goods.brand_id = ''
    if (user.userinfo) {
        let { name } = nodeData
        // let arr = []
        // arr.push(name)
        goods.thickness = name
    } else {
        ElMessage.error('请登录账号')
    }
}

const handtype = (nodeData) => {
    goods.page = 1
    console.log(nodeData, "品牌");
    goods.brand_id = ''
    if (user.userinfo) {
        let { name } = nodeData
        // let arr = []
        // arr.push(name)
        goods.thickness = name
    } else {
        ElMessage.error('请登录账号')
    }
}
const handleCleara = () => {
    goods.page = 1
    goods.type = []
    value5.value = null
}
// 清空
const handleClear = () => {
    goods.page = 1
    goods.spec = []
    value.value = null
}
const handleClear1 = () => {
    goods.page = 1
    goods.technology = []
    value1.value = null

}
const handleClear2 = () => {
    goods.page = 1
    goods.technology = []
    value2.value = null
    console.log(goods, "=========1");

}
const handleClear3 = () => {
    goods.page = 1
    goods.category = []
    value3.value = null
}


const handleClear4 = () => {
    goods.page = 1
    goods.thickness = []
    value4.value = null
}
const handleClear5 = () => {
    goods.page = 1
    goods.brand_id = []
    value1.value = null
}

const handleClear6 = () => {
    goods.page = 1
    goods.typea = []
    value6.value = null
}

const handleClear7 = () => {
    goods.page = 1
    goods.typeb = []
    value7.value = null
}

const handleClear8 = () => {
    goods.page = 1
    goods.typec = []
    value8.value = null
}

const handleClear9 = () => {
    goods.page = 1
    goods.typed = []
    value9.value = null
}

const handleClear10 = () => {
    goods.page = 1
    goods.typee = []
    value10.value = null
}

const treeRef = ref();
const treeRef1 = ref();
const treeRef2 = ref();
const treeRef3 = ref();
const treeRef4 = ref();
onMounted(() => {
    const checkedKeys = goods.spec; // 设置需要选中的节点的 key
    value.value = checkedKeys[0]
    const checkedKeys1 = goods.brand_id; // 设置需要选中的节点的 
    value1.value = checkedKeys1[0]
    const checkedKeys2 = goods.technology; // 设置需要选中的节点的 key
    value2.value = checkedKeys2[0]
    const checkedKeys3 = goods.category; // 设置需要选中的节点的 key
    value3.value = checkedKeys3[0]
    const checkedKeys4 = goods.thickness; // 设置需要选中的节点的 key
    value4.value = checkedKeys4[0]
    const checkedKeys5 = goods.type; // 设置需要选中的节点的 key
    value5.value = checkedKeys5[0]

    const checkedKeys6 = goods.typea; // 设置需要选中的节点的 key
    value6.value = checkedKeys6[0]

    const checkedKeys7 = goods.typeb; // 设置需要选中的节点的 key
    value7.value = checkedKeys7[0]

    const checkedKeys8 = goods.typec; // 设置需要选中的节点的 key
    value8.value = checkedKeys8[0]

    const checkedKeys9 = goods.typed; // 设置需要选中的节点的 key
    value9.value = checkedKeys9[0]

    const checkedKeys10 = goods.typee; // 设置需要选中的节点的 key
    value10.value = checkedKeys10[0]


    console.log(checkedKeys, checkedKeys1, checkedKeys2, checkedKeys3, checkedKeys4);
});





</script>

<style lang="scss" scoped>
.sel-box {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    width: 7.8125rem;
    padding-right: .1042rem;
    font-size: 12px;
}


.search-list {
    min-height: .3646rem;
    padding: .1042rem 0 .1042rem .1042rem;
    display: flex;
    flex-wrap: wrap;

    >p {
        min-width: .7813rem;
        padding: 0 .0521rem;
        height: .1563rem;
        background: #EEF6EC;
        border: .0052rem solid #3F7233;
        border-radius: .0781rem;
        font-size: .0677rem;
        font-weight: 400;
        color: #3F7233;
        margin-right: .0521rem;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        margin-bottom: 10px;

        >i {
            width: .0677rem;
            height: .0677rem;
            background: url('../../assets/images/icon_gb.png') no-repeat 0 0/100% 100%;
            cursor: pointer;

            &:hover {
                opacity: 0.8;
            }

            &:active {
                opacity: 1;
            }
        }
    }

    >p.title {
        width: .5208rem;
        background: #3F7233;
        font-size: .0729rem;
        font-weight: bold;
        color: #FFFFFF;
        margin-right: .1042rem;

    }
}

.bg-cont {
    height: .0052rem;
    background: #EEEEEE;
    border-radius: .0052rem;
}

.sel-cont {
    padding: .1042rem 0 .10421rem .1083rem;
    font-size: 18px;
    flex: 1;

    .com-sel {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        position: relative;

        .my-icon {
            position: absolute;
            top: center;
            right: .1823rem;
            cursor: pointer;
            color: #409eff;
        }

        >.el-tree {
            display: flex;
            flex-wrap: wrap;
            margin-right: .0521rem;
            padding: 0 .0521rem;
        }
    }

    .com-sel.pad {
        padding-left: .1042rem;
    }
}

.el-col {
    display: flex;
    align-items: center;
    text-align: center;
    font-size: 12px;
    &:last-child {
        padding-left: 0 !important;
    }
    &:first-child {
        padding-right: 0 !important;
    }
}
</style>

<style lang="scss">
.el-checkbox__input.is-checked .el-checkbox__inner {
    background: #3F7233;
    border-color: #3F7233;
}

.el-checkbox__inner:hover {
    border-color: #3F7233;
}


.show-clear .el-input__clear {
    display: inline-block !important;
}

.el-input__icon.el-icon-circle-close {
    display: inline-block;
    font-size: 12px;
    color: #999;
    cursor: pointer;
    margin-left: 5px;
}
</style>